<template>
  <div class="tbc-flex-row"
       style="flex-direction: row;align-items: center;justify-content: center;" :style="outerStyle">
    <div class="tbc-flex-row" style="flex-direction: row;align-items: center" :style="containerStyle">
      <div style="width: 10px"></div>
      <div style="width: 18px;height: 15px;background: url('https://st.360buyimg.com/so/images/search/jd-sprites.png?__inline=') -80px 0 no-repeat;background-size: 200px;"></div>
      <div style="width: 10px"></div>
      <div style="flex: 1;">
        <input type="text" placeholder="搜索" style="outline: 0;border: 0;width: 100%;height: 100%;background: none;"
               :style="fontStyle"/>
      </div>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
      outerStyle: '',
      containerStyle: '',
      iconStyle: '',
      fontStyle: '',
      module: {
        config: {
          outer: {},
          container: {},
          item: {},
          menu: {rowNumber: 5},
          font: {fontColor: ''}
        },
        data: []
      },
      max: 0
    }
  },

  methods: {
// 初始化
    init(module) {
      this.module = module
      this.setOuterStyle()
      this.setContainerStyle()
      this.setFontStyle()
    },

    // 设置外层容器样式
    setOuterStyle() {
      let style = []
      let config = this.module.config.outer || {}
      if (config.width) style.push('width:' + config.width / 2 + 'px')
      if (config.height) style.push('height:' + config.height / 2 + 'px')
      if (config.background) style.push('background:' + config.background)
      this.outerStyle = style.join(';')
    },

    // 设置内层容器样式
    setContainerStyle() {
      let style = [], config = this.module.config.container || {}
      if (config.width) style.push('width:' + config.width / 2 + 'px')
      if (config.height) style.push('height:' + config.height / 2 + 'px')
      if (config.background) style.push('background:' + config.background)
      if (config.borderRadius) style.push('border-radius:' + config.borderRadius / 2 + 'px')
      if (config.height) this.height = config.height / 2 + 'px'
      this.containerStyle = style.join(';')
    },


    // 设置文字
    setFontStyle() {
      let style = []
      let config = this.module.config.font || {}
      if (config.fontSize) style.push('font-size:' + config.fontSize / 2 + 'px')
      if (config.color) style.push('color:' + config.color)
      this.fontStyle = style.join(';')
    },
  }
}
</script>